// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Modal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { orderDel } from '../../module/module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { RnButton } from '../../components/index.js'

// 引入工具包
import {   size, ScreenWidth } from '../../util/utils.js'
class OrderOperation extends Component {

	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {}
	}

	orderDel() {
		const { order, onOperationEnd } = this.props
		orderDel({ orderNo: order.orderNo }).then(res => {
			onOperationEnd(res)
		})
	}

	isOrderDel() {
		Modal.alert('删除', '确认删除订单', [
			{
				text: '取消',
				onPress: () => { },
				style: 'cancel',
			},
			{ text: '确定', onPress: () => this.orderDel() },
		]);
	}

	render() {
		const { order } = this.props

		// '待付款'
		if (order.status == 1) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<TouchableOpacity
						onPress={() => {
							Actions.selectPay(order)
						}}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>立即付款</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '待发货'
		if (order.status == 2) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>

					<TouchableOpacity
						onPress={() => { }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>申请退款</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '待收货'
		if (order.status == 3) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<TouchableOpacity
						onPress={() => { }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>查看物流</Text>
					</TouchableOpacity>
					<TouchableOpacity
						onPress={() => { }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>确认收货</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '已完成'
		if (order.status == 4) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<RnButton
						type="danger"
						onPress={() => {
							this.orderDel()
						}}
					>删除订单</RnButton>
					<TouchableOpacity
						onPress={() => { }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>申请售后</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '已取消'
		if (order.status == 5) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<RnButton
						type="danger"
						onPress={() => {
							this.isOrderDel()
						}}
					>删除订单</RnButton>
				</View>
			)
		}

		return null
	}
}

export default pureRender(OrderOperation)
